<!--<template>-->
<!--  <div id="main" style="width: 600px; height: 400px;"></div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { onMounted } from 'vue';-->
<!--import * as echarts from 'echarts';-->

<!--onMounted(() => {-->
<!--  const chartDom = document.getElementById('main');-->
<!--  const myChart = echarts.init(chartDom);-->
<!--  let option;-->

<!--  option = {-->
<!--    xAxis: {-->
<!--      type: 'category',-->
<!--      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']-->
<!--    },-->
<!--    yAxis: {-->
<!--      type: 'value'-->
<!--    },-->
<!--    series: [-->
<!--      {-->
<!--        data: [150, 230, 224, 218, 135, 147, 260],-->
<!--        type: 'line'-->
<!--      }-->
<!--    ]-->
<!--  };-->

<!--  option && myChart.setOption(option);-->
<!--});-->
<!--</script>-->

<!--<style scoped>-->
<!--#main {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--}-->
<!--</style>-->


<!--<template>-->
<!--  <div>-->
<!--    <div id="chart1" style="width: 1000px; height: 400px; margin-bottom: 20px;" class="chart-container"></div>-->
<!--    <div id="chart2" style="width: 600px; height: 400px;" class="chart-container"></div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { onMounted } from 'vue';-->
<!--import * as echarts from 'echarts';-->

<!--onMounted(() => {-->
<!--  // 初始化第一个图表-->
<!--  const chartDom1 = document.getElementById('chart1');-->
<!--  const myChart1 = echarts.init(chartDom1);-->
<!--  let option1;-->

<!--  option1 = {-->
<!--    title: {-->
<!--      text: '最近七天各站充电情况'-->
<!--    },-->
<!--    tooltip: {-->
<!--      trigger: 'axis',-->
<!--      axisPointer: {-->
<!--        type: 'cross',-->
<!--        label: {-->
<!--          backgroundColor: '#6a7985'-->
<!--        }-->
<!--      }-->
<!--    },-->
<!--    legend: {-->
<!--      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']-->
<!--    },-->
<!--    toolbox: {-->
<!--      feature: {-->
<!--        saveAsImage: {}-->
<!--      }-->
<!--    },-->
<!--    grid: {-->
<!--      left: '3%',-->
<!--      right: '4%',-->
<!--      bottom: '3%',-->
<!--      containLabel: true-->
<!--    },-->
<!--    xAxis: [-->
<!--      {-->
<!--        type: 'category',-->
<!--        boundaryGap: false,-->
<!--        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']-->
<!--      }-->
<!--    ],-->
<!--    yAxis: [-->
<!--      {-->
<!--        type: 'value'-->
<!--      }-->
<!--    ],-->
<!--    series: [-->
<!--      {-->
<!--        name: 'Email',-->
<!--        type: 'line',-->
<!--        stack: 'Total',-->
<!--        areaStyle: {},-->
<!--        emphasis: {-->
<!--          focus: 'series'-->
<!--        },-->
<!--        data: [120, 132, 101, 134, 90, 230, 210]-->
<!--      },-->
<!--      {-->
<!--        name: 'Union Ads',-->
<!--        type: 'line',-->
<!--        stack: 'Total',-->
<!--        areaStyle: {},-->
<!--        emphasis: {-->
<!--          focus: 'series'-->
<!--        },-->
<!--        data: [220, 182, 191, 234, 290, 330, 310]-->
<!--      },-->
<!--      {-->
<!--        name: 'Video Ads',-->
<!--        type: 'line',-->
<!--        stack: 'Total',-->
<!--        areaStyle: {},-->
<!--        emphasis: {-->
<!--          focus: 'series'-->
<!--        },-->
<!--        data: [150, 232, 201, 154, 190, 330, 410]-->
<!--      },-->
<!--      {-->
<!--        name: 'Direct',-->
<!--        type: 'line',-->
<!--        stack: 'Total',-->
<!--        areaStyle: {},-->
<!--        emphasis: {-->
<!--          focus: 'series'-->
<!--        },-->

<!--        data: [320, 332, 301, 334, 390, 330, 320]-->
<!--      },-->
<!--      {-->
<!--        name: 'Search Engine',-->
<!--        type: 'line',-->
<!--        stack: 'Total',-->
<!--        label: {-->
<!--          show: true,-->
<!--          position: 'top'-->
<!--        },-->
<!--        areaStyle: {},-->
<!--        emphasis: {-->
<!--          focus: 'series'-->
<!--        },-->
<!--        data: [820, 932, 901, 934, 1290, 1330, 1320]-->
<!--      }-->
<!--    ]-->
<!--  };-->

<!--  option1 && myChart1.setOption(option1);-->

<!--  // 初始化第二个图表-->
<!--  const chartDom2 = document.getElementById('chart2');-->
<!--  const myChart2 = echarts.init(chartDom2);-->
<!--  let option2;-->

<!--  option2 = {-->
<!--    xAxis: {-->
<!--      type: 'category',-->
<!--      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']-->
<!--    },-->
<!--    yAxis: {-->
<!--      type: 'value'-->
<!--    },-->
<!--    series: [-->
<!--      {-->
<!--        data: [150, 230, 224, 218, 135, 147, 260],-->
<!--        type: 'line'-->
<!--      }-->
<!--    ]-->
<!--  };-->

<!--  option2 && myChart2.setOption(option2);-->
<!--});-->
<!--</script>-->

<!--<style scoped>-->
<!--.chart-container {-->
<!--  width: 600px;-->
<!--  height: 400px;-->
<!--  margin-bottom: 20px;-->
<!--  background-color: #f0f0f0; /* 背景颜色 */-->
<!--  border-radius: 15px; /* 圆角 */-->
<!--  padding: 10px; /* 内边距 */-->
<!--}-->
<!--</style>-->

<template>
  <div>
    <div id="chart1" class="chart-container"></div>
    <div id="chart2" class="chart-container"></div>
    <div id="chart3" class="chart-container"></div>
  </div>
</template>

<script setup>
import {onMounted} from 'vue';

import * as echarts from 'echarts';
import {post} from "@/api/request";

onMounted(() => {
  // 初始化第一个图表
  const chartDom1 = document.getElementById('chart1');
  const myChart1 = echarts.init(chartDom1);
  const chartDom2 = document.getElementById('chart2');
  const myChart2 = echarts.init(chartDom2);
  const chartDom3 = document.getElementById('chart3');
  const myChart3 = echarts.init(chartDom3);

  // 定义要传递的参数
  const params1 = {
    begin: "2024-04-04",
    end: "2024-09-10"
  };

  post('http://192.168.224.26:8082/chargeStation/getTopStation?', params1)
      .then(response => {
            console.log(response);
            const [data0, data1, data2, data3] = response.data;
            const dates = data1.map(item => item.chargeDate);

            const chargeCounts = [data0, data1, data2, data3].map(data => data.map(item => item.chargeCount));
            const electricityUsage = [data0, data1, data2, data3].map(data => data.map(item => item.electricityUsage))
            const totalServiceFee = [data0, data1, data2, data3].map(data => data.map(item => item.totalServiceFee));

            const seriesNames = ['泰云机车城', '爱业新纸品', '仁义村充电站', '广西规划馆'];
            const seriesData = seriesNames.map((name, index) => ({
              name,
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: { focus: 'series' },
              data: chargeCounts[index]
            }));
            const electricityUsageData = seriesNames.map((name, index) => ({
              name,
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: { focus: 'series' },
              data: electricityUsage[index]
            }));
            const totalServiceFeeData = seriesNames.map((name, index) => ({
              name,
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: { focus: 'series' },
              data: totalServiceFee[index]
            }));

            const option1 = {
              title: { text: '日充电次数' },
              tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
                formatter: function (params) {
                  let result = params[0].name + '<br/>';
                  params.forEach(item => {
                    result += item.marker + item.seriesName + ': ' + item.value + ' 次<br/>';
                  });
                  return result;
                }
              },
              legend: { data: seriesNames },
              toolbox: { feature: { saveAsImage: {} } },
              grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
              xAxis: [{ type: 'category', boundaryGap: false, data: dates }],
              yAxis: [{ type: 'value' }],
              series: seriesData
            };
            const option2 = {
              title: { text: '日充电量' },
              tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
                formatter: function (params) {
                  let result = params[0].name + '<br/>';
                  params.forEach(item => {
                    result += item.marker + item.seriesName + ': ' + item.value + ' kw<br/>';
                  });
                  return result;
                }
              },
              legend: { data: seriesNames },
              toolbox: { feature: { saveAsImage: {} } },
              grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
              xAxis: [{ type: 'category', boundaryGap: false, data: dates }],
              yAxis: [{ type: 'value' }],
              series: electricityUsageData
            };
            const option3 = {
              title: { text: '日服务费' },
              tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
                formatter: function (params) {
                  let result = params[0].name + '<br/>';
                  params.forEach(item => {
                    result += item.marker + item.seriesName + ': ' + item.value + ' 元<br/>';
                  });
                  return result;
                }
              },
              legend: { data: seriesNames },
              toolbox: { feature: { saveAsImage: {} } },
              grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
              xAxis: [{ type: 'category', boundaryGap: false, data: dates }],
              yAxis: [{ type: 'value' }],
              series: totalServiceFeeData
            };
            option1 && myChart1.setOption(option1);
            option2 && myChart2.setOption(option2);
            option3 && myChart3.setOption(option3);
      //       console.log(response)
      //       const data0 = response.data[0];
      //       const data1 = response.data[1];
      //       const data2 = response.data[2];
      //       const data3 = response.data[3];
      //       const dates = data1.map(item => item.chargeDate);
      //       const chargeCounts0 = data0.map(item => item.chargeCount);
      //       const chargeCounts1 = data1.map(item => item.chargeCount);
      //       const chargeCounts2 = data2.map(item => item.chargeCount);
      //       const chargeCounts3 = data3.map(item => item.chargeCount);
      //       console.log(data1)
      //       option1 = {
      //         title: {
      //           text: '日充电次数'
      //         },
      //         tooltip: {
      //           trigger: 'axis',
      //           axisPointer: {
      //             type: 'cross',
      //             label: {
      //               backgroundColor: '#6a7985'
      //             }
      //           }
      //           ,
      //           formatter: function (params) {
      //             let result = params[0].name + '<br/>';
      //             params.forEach(item => {
      //               result += item.marker + item.seriesName + ': ' + item.value + ' 次<br/>';
      //             });
      //             return result;
      //           }
      //         },
      //         legend: {
      //           data: ['泰云机车城', '爱业新纸品', '仁义村充电站', '广西规划馆']
      //         },
      //         toolbox: {
      //           feature: {
      //             saveAsImage: {}
      //           }
      //         },
      //         grid: {
      //           left: '3%',
      //           right: '4%',
      //           bottom: '3%',
      //           containLabel: true
      //         },
      //         xAxis: [
      //           {
      //             type: 'category',
      //             boundaryGap: false,
      //             data: dates
      //           }
      //         ],
      //         yAxis: [
      //           {
      //             type: 'value'
      //           }
      //         ],
      //         series: [
      //           {
      //             name: '泰云机车城',
      //             type: 'line',
      //             stack: 'Total',
      //             areaStyle: {},
      //             emphasis: {
      //               focus: 'series'
      //             },
      //             data: chargeCounts0
      //           },
      //           {
      //             name: '爱业新纸品',
      //             type: 'line',
      //             stack: 'Total',
      //             areaStyle: {},
      //             emphasis: {
      //               focus: 'series'
      //             },
      //             data: chargeCounts1
      //           },{
      //             name: '仁义村充电站',
      //             type: 'line',
      //             stack: 'Total',
      //             areaStyle: {},
      //             emphasis: {
      //               focus: 'series'
      //             },
      //             data: chargeCounts2
      //           }
      //           ,{
      //             name: '广西规划馆',
      //             type: 'line',
      //             stack: 'Total',
      //             areaStyle: {},
      //             emphasis: {
      //               focus: 'series'
      //             },
      //             data: chargeCounts3
      //           }
      //         ]
      //       };
      //       option1 && myChart1.setOption(option1);
          })
      .catch(error => {
        console.error('Error fetching data for chart1:', error);
      });

  // // 初始化第二个图表
  // const chartDom2 = document.getElementById('chart2');
  // const myChart2 = echarts.init(chartDom2);
  // let option2;
  //
  // // 定义要传递的参数
  // const params2 = {
  //   param1: 'value1',
  //   param2: 'value2'
  // };
  //
  // axios.post('https://your-backend-api.com/data2', params2)
  //     .then(response => {
  //       const data2 = response.data;
  //       option2 = {
  //         xAxis: {
  //           type: 'category',
  //           data: data2.dates
  //         },
  //         yAxis: {
  //           type: 'value'
  //         },
  //         series: [
  //           {
  //             data: data2.values,
  //             type: 'line',
  //             itemStyle: {
  //               color: '#ee6666' // 设置颜色
  //             }
  //           }
  //         ]
  //       };
  //       option2 && myChart2.setOption(option2);
  //     })
  //     .catch(error => {
  //       console.error('Error fetching data for chart2:', error);
  //     });
});
</script>

<style scoped>
.chart-container {
  width: 1200px;
  height: 400px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: #f0f0f0; /* 背景颜色 */
  /*background-color: #f0f0f0; /*背景颜色*/
  border-radius: 15px; /* 圆角 */
  padding: 10px; /* 内边距 */
}
</style>
